const panels = document.querySelectorAll('.panel')

// 2.2 点击切换活跃状态类名 -> 用到了 "排他思想"
panels.forEach(panel => {
  panel.addEventListener('click', () => {
    // 2.3 点击前, 先进行 (排)删除活跃类名：
    removeActiveClasses()

    // 2.4 再(加)上对应活跃类名：
    panel.classList.add('active')
  })
})

function removeActiveClasses() {
  panels.forEach(panel => {
    panel.classList.remove('active')
  })
}